<template>
  <div>
    <van-cell-group>
  <van-field v-model="mobile" label="手机号" placeholder="请输入用户名" @click="shou"/>
  <van-button @click="pan" :disabled='flag'>{{msg}}</van-button>
  <van-field v-model="tu" label="图片验证码" placeholder="图片验证码" @click="tuqian"/>
  <img width="100" height="30" :src='img1' @click="dian"/>
  <van-field v-model="duan" label="短信验证码" placeholder="短信验证码" />
  <van-button @click="deng">登录</van-button>
</van-cell-group>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid'
export default {
    data(){
        return{
            uuid1:'',
            img1:"",
            duan:'',
            tu:'',
            mobile:'',
            flag:false,
            time:30,
            msg:'发送验证码'

        }
    },
    mounted(){
      this.dian()
    },
    methods:{
        dian(){
            this.uuid1 = uuid()
            this.img1 = 'http://localhost:8000/img?uuid='+ this.uuid1
        },
        pan(){
            this.axios.post('dui',{'uuid':this.uuid1,'mobile':this.mobile,'tu':this.tu})
            // .then(res=>{
            //     if(res.data.code==200){
            //         alert(res.data.msg)
            //     }else{
            //         alert(res.data.msg)
            //     }
            // })
            .then(res=>{
                // 发送成功开始倒计时 按钮为不可用状态 数字为0后 再变为可点击
                if(res.data.code==200){
                    this.flag=true
                    alert(res.data.msg)
                    var t=setInterval(()=>{
                        if(this.time==0){
                            clearInterval(t)
                            this.msg="发送验证码"
                            this.flag=false
                        }else{
                            this.time--
                            this.msg=this.time+"秒"
                            this.flag=true
                        }
                    },1000)
                }
            })
        },
        tuqian(){
            if(this.tu == ''||this.tu==null){
                alert('请输入图片验证码验证码')
                return false
            }
        },
        shou(){
            var shou =/^1[3-9]\d{9}$/
            if (!shou.test(this.mobile)){
                alert('手机号格式不正确')
            }
        },
        deng(){
            this.axios.post('login',{'duan':this.duan,'mobile':this.mobile})
            .then(res=>{
                if(res.data.code==200){
                    alert(res.data.msg)
                    localStorage.setItem("token", res.data.token);
                    localStorage.setItem("userid", res.data.userid);
                }else{
                    alert(res.data.msg)
                }
            })
        }

    }

}
</script>

<style>

</style>